<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js里的循环 
        // 1.for循环  ： 命令式 ，注重 过程 ，不够抽象 。怎么做？
        // var arr = ["张三","李四","王五"];
        // for(var i=0;i<arr.length;i++){
        //     console.log(arr[i]);
        // }

        // 2.声明式的循环 ： 注重结果  ，做什么？
        // 声明式循环

        // 一、forEach循环 ，注重结果 

        // var arr = ["张三","李四","王五"];

        // arr.forEach(function(item){
        //     console.log(item); // 获取 数组键值的结果 。
        // })

        // arr.forEach(function(item,key,arr){
        //     console.log(item,key,arr);
        // })

        // var lis = document.querySelectorAll("li");
        // console.log(lis);
        // var ： 1.全局作用域  2.函数作用域
        // for (var i = 0; i < lis.length; i++) {
        //     // (function (i) {
        //         lis[i].onclick = function () {
        //             console.log(i);
        //         }
        //     // })(i)
        // }

        // lis.forEach(function(item,key){
        //     item.onclick = function(){
        //         console.log(key)
        //     }
        // })


        // 自己封装 forEach方法 
        // 把for循环过程封装起来了
        function myforEach(cb,arr){
            for(var i=0;i<arr.length;i++){
                cb(arr[i],i,arr);
            }
        }

        var arr = ["张三","李四","王五"];
        myforEach(function(item,key,arr){
            console.log(item,key,arr);
        },arr);

    </script>
</body>

</html>